<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header-bg">
			<view class="person-info flex justify-between align-center">
				<view class="person-info-wrapper flex align-center">
					<u-image width="84" height="84" border-radius="42" class="avatar" :src="personInfo.avatar">
						<view slot="error">
							<u-image width="84" height="84" border-radius="42" class="avatar"
								src="/static/images/person/person-default-icon.png"></u-image>
						</view>
					</u-image>
					<view class="person-msg flex flex-column">
						<text class="name">{{personInfo.nickname!=""?personInfo.nickname:personInfo.shiming?personInfo.shiming.realName:"--"}}</text>
						<text class="account">{{isMock?'体验 '+getUserInfo.username:'实盘 '+getUserInfo.username}}</text>
					</view>
				</view>
				<view class="common-btn switch-account-btn" @tap="switchAccount">切换账户</view>
			</view>
			<view class="vip-wrapper">
				<!-- 	<view class="vip-bg flex align-center justify-between">
					<view class="vip-info flex flex-column">
						<text class="vip-status">普通会员</text>
						<text class="desc">升级高级会员享受更多福利</text>
					</view>
					<view class="up-btn">去升级</view>
				</view> -->
				<view class="account-wrapper flex justify-between align-center">
					<view class="account-info flex flex-column">
						<text class="label flex align-center">
							<text class="mr-20">我的资产CNY </text>
							<u-icon name="eye-off" v-if="accountHidden" @tap="accountHidden=false"></u-icon> 
							<u-icon name="eye-fill" v-else @tap="accountHidden=true"></u-icon>
						</text>
						<text class="value">{{moneyFilter(accountInfo.money_yue)}}</text>
					</view>
					<view class="options flex">
						<view class="withdraw-btn" @tap="withdraw">取款</view>
						<router-link to="/pages/deposit/deposit" class="deposit-btn">存款</router-link>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-list-wrapper">
			<view class="menu-title">其他快捷</view>
			<view class="menu-list flex justify-between">
				<router-link class="menu-item flex align-center justify-center flex-column"
					to="/pages/shareJoin/shareJoin">
					<view class="menu-icon menu-icon-1"></view>
					<text class="menu-text">推荐有礼</text>
				</router-link>
				<!-- <router-link class="menu-item flex align-center justify-center flex-column" to="">
					<view class="menu-icon menu-icon-2"></view>
					<text class="menu-text">活动中心</text>
				</router-link> -->
				<router-link v-if="shengxintou_status" class="menu-item flex align-center justify-center flex-column" to="/pages/noWorry/noWorry">
					<view class="menu-icon menu-icon-3"></view>
					<text class="menu-text">省心投</text>
				</router-link>
				<router-link class="menu-item flex align-center justify-center flex-column" to="/pages/moneyDetail/moneyDetail">
					<view class="menu-icon menu-icon-4"></view>
					<text class="menu-text">资金记录</text>
				</router-link>
				
				<!-- <router-link class="menu-item flex align-center justify-center flex-column" to="/pages/webview/kefu">
					<view class="menu-icon menu-icon-5"></view>
					<text class="menu-text">联系客服</text>
				</router-link> -->
				<view class="menu-item flex align-center justify-center flex-column"  @click="copy('95766229')">
					<view class="menu-icon menu-icon-5"></view>
					<text class="menu-text">联系客服</text>
				</view>
				
				<router-link class="menu-item flex align-center justify-center flex-column"
					to="/pages/personInfo/personInfo">
					<view class="menu-icon menu-icon-6"></view>
					<text class="menu-text">个人信息</text>
				</router-link>
				<router-link class="menu-item flex align-center justify-center flex-column" to="/pages/service/service">
					<view class="menu-icon menu-icon-7"></view>
					<text class="menu-text">意见反馈</text>
				</router-link>
				<router-link class="menu-item flex align-center justify-center flex-column" to="/pages/userTip/userTip">
					<view class="menu-icon menu-icon-8"></view>
					<text class="menu-text">用户须知</text>
				</router-link>
				<!-- <router-link class="menu-item flex align-center justify-center flex-column" to="">
					<view class="menu-icon menu-icon-9"></view>
					<text class="menu-text">消息中心</text>
				</router-link> -->
				<router-link class="menu-item flex align-center justify-center flex-column" to="/pages/setting/setting">
					<view class="menu-icon menu-icon-10"></view>
					<text class="menu-text">系统设置</text>
				</router-link>

			</view>
		</view>
		<view class="recognize-wrapper flex align-center justify-between" v-if="!personInfo.shiming">
			<view class="recognize-icon"></view>
			<text class="recognize-text">完成实名认证，领取更多豪礼</text>
			<router-link class="recognize-btn" to="/pages/recognize/recognize">去认证</router-link>
		</view>
		<u-modal :show-title="false" v-model="recognizeDialogFlag" confirm-text="实名认证" @confirm="toRecognize"
			confirm-color="#1677FF" content="你好,实名认证后才可以进行取款"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters,
		mapState
	} from "vuex"
	import {
		createWebsocket,
		sendSocketMessage
	} from '@/websocket/index.js'
	export default {
		data() {
			return {
				personInfo: {},
				recognizeDialogFlag: false,
				accountHidden:true,
				timer:null,
				accountInfo:{},
				shengxintou_status:""
			};
		},
		computed: {
			...mapGetters("user", ["getUserInfo", "getToken"]),
			...mapState("user", ["isMock"])
		},
		methods: {
			...mapMutations("user", ["logout", "modifyIsMock", "modifyMockUserInfo"]),
			copy(value){
				uni.setClipboardData({
				    data: value,
				    success: function () {
				        uni.showToast({
				        	icon:"success",
							title:"QQ95766229复制成功"
				        })
				    }
				});
			},
			moneyFilter(value){
				if(this.accountHidden){
					return  new Array((value+"").length).fill("*").join("")
				}
				return value
			},
			toRecognize() {
				this.$Router.push("/pages/recognize/recognize")
			},
			withdraw() {
				if (this.isMock) {
					return false
				}
				if (!this.personInfo.shiming) {
					this.recognizeDialogFlag = true
					return false
				}
				this.$Router.push("/pages/withdraw/withdraw")
			},
			async switchAccount() {
				if (this.isMock) {
					this.modifyIsMock(!this.isMock)
				} else {
					try {
						let res = await this.$u.api.switchMockApi()
						this.modifyMockUserInfo(res.userinfo)
						this.modifyIsMock(!this.isMock)


					} catch (e) {
						//TODO handle the exception
					}
				}
				this.personInfo = await this.$u.api.personInfoApi()
			},
			websocketOpenCallback() {
				sendSocketMessage(JSON.stringify({
					action: "ajaxorder_list",
					token: this.getToken
				}))
				this.timer = setInterval(() => {
					sendSocketMessage(JSON.stringify({
						action: "ajaxorder_list",
						token: this.getToken
					}))
				}, 1000)
			},
			websocketMessageCallback({
				data
			}) {
				if (data.action == "ajaxorder_list") {
					this.accountInfo = data.res.data;
				}
			}
		},
		async onLoad(){
			try{
			  let res=await this.$u.api.depositInfoApi()
			  this.shengxintou_status=parseInt(res.shengxintou_status) 
			}catch(e){
				//TODO handle the exception
			}
		},
		async onShow() {
			//websocket
			createWebsocket()
			this.websocketOpenCallback()
			uni.$on("websocketMessage", this.websocketMessageCallback)
			
			try {
				this.personInfo = await this.$u.api.personInfoApi()
			} catch (e) {
				//TODO handle the exception
			}
		},
		onHide() {
			uni.$off("websocketMessage", this.websocketMessageCallback)
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		// padding-top: calc(468rpx - var(--status-bar-height));
		padding-top: calc(338rpx - var(--status-bar-height));
		padding-bottom: 70rpx;

		.status_bar {
			&::after {
				background: #406BE7;
			}
		}

		.header-bg {
			// padding: 172rpx 30rpx 0;
			padding: 70rpx 30rpx 0;
			position: absolute;
			left: 0;
			width: 100%;
			top: 0;
			// height: 468rpx;
			height: 338rpx;
			box-sizing: border-box;
			background: url("~@/static/images/person/person-bg.png");
			background-size: 100% 100%;

			.person-info {
				.person-info-wrapper {
					.avatar {
						height: 84rpx;
						width: 84rpx;
						border-radius: 50%;
					}

					.person-msg {
						margin-left: 10rpx;

						.name {
							font-size: 36rpx;
							font-weight: 600;
							color: #FFFFFF;
						}

						.account {
							margin-top: 8rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							white-space: nowrap;
						}
					}

				}

				.switch-account-btn {
					width: 172rpx;
					height: 60rpx;
					background: rgba(0, 0, 0, 0.32);
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
				}
			}

			.vip-wrapper {
				margin-top: 52rpx;

				.vip-bg {
					padding: 0 20rpx 0 20rpx;
					height: 100rpx;
					background: url("~@/static/images/person/vip-bg.png");
					background-size: 100% 100%;

					.vip-info {
						.vip-status {
							font-size: 30rpx;
							font-weight: 500;
							color: #FAE8C7;
						}

						.desc {
							font-size: 24rpx;
							color: rgba(255, 255, 255, 0.67);
						}
					}

					.up-btn {
						width: 118rpx;
						height: 46rpx;
						background: linear-gradient(112deg, #FCE9BD 0%, #E7CD97 100%);
						border-radius: 25rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #716159;
						line-height: 46rpx;
						text-align: center;
					}
				}

				.account-wrapper {
					padding: 10rpx 30rpx;
					// border-radius: 30rpx 30rpx 0 0;
					border-radius: 20rpx;
					background-color: #fff;
					height: 154rpx;
					box-sizing: border-box;

					.account-info {
						.label {
							font-size: 28rpx;
							color: #999999;
						}
						.mr-20{
							margin-right: 20rpx;
						}
						.value {
							margin-top: 6rpx;
							font-size: 50rpx;
							font-weight: 600;
							color: #333333;
						}
					}

					.options {
						.withdraw-btn {
							margin-right: 20rpx;
							width: 136rpx;
							height: 60rpx;
							background: #FFFFFF;
							border-radius: 30rpx;
							border: 2rpx solid $color-blue;
							font-size: 28rpx;
							color: $color-blue;
							line-height: 60rpx;
							text-align: center;
						}

						.deposit-btn {
							width: 136rpx;
							height: 60rpx;
							background: $color-blue;
							border-radius: 30rpx;
							border: 2rpx solid $color-blue;
							font-size: 28rpx;
							line-height: 60rpx;
							text-align: center;
							color: #fff;
						}
					}
				}
			}
		}

		.menu-list-wrapper {
			padding: 30rpx;
			margin: 65rpx 30rpx 0;
			border-radius: 16rpx;
			background-color: #fff;

			.menu-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #3D445C;
			}

			.menu-list {
				margin-top: 20rpx;
				flex-wrap: wrap;

				&::after {
					content: " ";
					width: 192rpx;
					height: 192rpx;
				}

				.menu-item {
					margin-bottom: 26rpx;
					width: 192rpx;
					height: 192rpx;
					background: #F8F9FB;
					border-radius: 15rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}

				.menu-icon {
					height: 56rpx;
					width: 56rpx;
				}

				.menu-text {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #3D445C;
				}

				.menu-icon-1 {
					background: url("~@/static/images/person/menu-icon-1.png");
					background-size: 100% 100%;
				}

				.menu-icon-2 {
					background: url("~@/static/images/person/menu-icon-2.png");
					background-size: 100% 100%;
				}

				.menu-icon-3 {
					background: url("~@/static/images/person/menu-icon-3.png");
					background-size: 100% 100%;
				}

				.menu-icon-4 {
					background: url("~@/static/images/person/menu-icon-4.png");
					background-size: 100% 100%;
				}

				.menu-icon-5 {
					background: url("~@/static/images/person/menu-icon-5.png");
					background-size: 100% 100%;
				}

				.menu-icon-6 {
					background: url("~@/static/images/person/menu-icon-6.png");
					background-size: 100% 100%;
				}

				.menu-icon-7 {
					background: url("~@/static/images/person/menu-icon-7.png");
					background-size: 100% 100%;
				}

				.menu-icon-8 {
					background: url("~@/static/images/person/menu-icon-8.png");
					background-size: 100% 100%;
				}

				.menu-icon-9 {
					background: url("~@/static/images/person/menu-icon-9.png");
					background-size: 100% 100%;
				}

				.menu-icon-10 {
					background: url("~@/static/images/person/menu-icon-10.png");
					background-size: 100% 100%;
				}
			}
		}

		.recognize-wrapper {
			margin: 30rpx 30rpx 0;
			padding: 0 30rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.recognize-icon {
				width: 112rpx;
				height: 102rpx;
				background: url("~@/static/images/person/recognize-icon.png");
				background-size: 100% 100%;
			}

			.recognize-text {
				font-size: 28rpx;
				color: #333333;
			}

			.recognize-btn {
				width: 118rpx;
				height: 46rpx;
				background: linear-gradient(128deg, #3B65E1 0%, #4571EC 100%);
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 46rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
